import { Spin } from 'antd';
import { FC, ReactNode, CSSProperties } from 'react';

import cn from 'classnames';

import './index.less';
import useVisualHeight from '@/components/page-content-wrapper/hooks/useVisualHeight';

export interface PageContentWrapperProps {
  footer?: ReactNode;
  title?: ReactNode;
  loading?: boolean;
  className?: string;
  bodyStyle?: CSSProperties;
  headerStyle?: CSSProperties;
  footerStyle?: CSSProperties;
  autoResize?: boolean;
}

const PageContentWrapper: FC<PageContentWrapperProps> = ({
  loading,
  children,
  title,
  footer,
  className,
  bodyStyle,
  headerStyle,
  footerStyle,
  autoResize,
}) => {
  const height = useVisualHeight(autoResize || false, '#page-content-wrapper');

  const renderHeader = () => {
    if (!title) {
      return null;
    }

    return (
      <div className="content-header" style={headerStyle}>
        {title && <div className="content-title">{title}</div>}
      </div>
    );
  };

  const renderFooter = () => {
    if (!footer) {
      return null;
    }

    return (
      <div className="content-footer" style={footerStyle}>
        {footer}
      </div>
    );
  };

  return (
    <Spin spinning={loading}>
      <div className={cn(className, 'content-wrapper')} style={{ height }}>
        {renderHeader()}
        <div className="content-body" style={bodyStyle}>
          {children}
        </div>
        {renderFooter()}
      </div>
    </Spin>
  );
};

PageContentWrapper.defaultProps = {
  autoResize: true,
};

export default PageContentWrapper;
